<script setup lang="ts">
  import { ref } from 'vue';
  import { getBanners, getContactLink } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  const bannerList = ref<any[]>([]);
  const customerList = ref<any[]>([]);
  const customerRechargeList = ref<any[]>([]);
  const IMG_URL = import.meta.env.VITE_IMG_URL;
  const bannerParams = ref({ bannerType: 'DATA_BANNER', global: '' });
  const handleClick = (link: any) => {
    if (link) {
      window.open(link, '_self');
    }
  };
  // 获取banner图
  useRequest(getBanners, {
    defaultParams: [bannerParams.value],
    onSuccess(data: any) {
      bannerList.value = data;
    },
  });
  useRequest(getContactLink, {
    defaultParams: [{ type: 1 }],
    onSuccess(data: any) {
       customerList.value = data[0];
    },
  });
  useRequest(getContactLink, {
    defaultParams: [{ type: 2 }],
    onSuccess(data: any) {
     customerRechargeList.value = data[0];
    },
  });
</script>
<template>
  <div class="customer">
    <AppBar back :primary="true" :title="$t('Customerservice')" />
    <div class="customer-top">
      <div class="left-box">
         <p class="p1">{{ $t('Servicecenter') }}</p>
         <p class="p2">{{ $t('Accompanyyouallthewaywhenyouneedit') }}</p>
      </div>
        <div class="img-box">
            <img :src="$img('me/customer-banner.png')" />
        </div>
    </div>
    <div v-if="customerRechargeList.length" class="customer_title">{{ $t('Platform') }}</div>
    <div
      v-for="(item, index) in customerRechargeList"
      :key="index"
      class="content_box"
      @click="handleClick(item.contactLink)"
    >
      <div class="img_box">
        <img :src="$img('me/customer.png')" />
      </div>
      <p class="name">{{ $t('Customerservice') }} {{ index + 1 }}</p>
      <p class="link">{{ $t('Link') }}</p>
    </div>
    <div v-if="customerList.length" class="customer_title">{{ $t('Recharge') }}</div>
    <div
      v-for="(item, index) in customerList"
      :key="index"
      class="content_box"
      @click="handleClick(item.contactLink)"
    >
      <div class="img_box">
        <img :src="$img('me/customer.png')" />
      </div>
      <p class="name">{{ $t('Customerservice') }} {{ index + 1 }}</p>
      <p class="link">{{ $t('Link') }}</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .customer {
    .customer-top {
      padding: 18px 16px 0 40px; 
      display: flex;
      position: relative;
      height: 322px;
      .left-box {
        width: 50%;
        z-index: 10;
      }
      .p1 {
        font-size: 48px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 700;
        margin-top: 42px;
      }
      .p2 {
        color: rgba(255, 255, 255, 0.65);
        font-size: 26px;
        margin-top: 8px;
        line-height: 36px;
      }
      .img-box {
        width: 461px;
        height: 322px;
        position: absolute;
        right: 16px;
        top: -10px;
      }
    }
    .customer_title {
      font-size: 36px;
      color: #fff;
      padding-left: 30px;
      margin-bottom: 12px;
    }
    .content_box {
      margin: 0px 30px 30px;
      border-radius: 12px;
      background: #242424;
      padding: 26px 30px;
      @include center;

      .img_box {
        width: 88px;
        height: 88px;
        background: $body;
        margin-right: 20px;
        padding: 18px;
        border-radius: 50%;
        > img {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 32px;
        font-weight: 500;
        width: calc(100% - 112px - 120px);
      }

      .link {
        min-width: 120px;
        height: 60px;
        background: #0063F5;
        border-radius: 12px;
        color: #fff;
        font-size: 32px;
        @include center;
      }
    }
  }
</style>
